<template>
  <div id="paypage" style=" width: 100%;height: 100% ">
    <div class="content">
      <p>选择支付方式</p>
      <p class="span" @click="banf">取消</p>
      <ul>
        <li @click="choosePay(0)" :class="active == 0 ? 'active' : ''">
          <i></i> 微信支付
        </li>
        <li @click="choosePay(1)" :class="active == 1 ? 'active' : ''">
          <i></i> 支付宝支付
        </li>
        <el-button class="lin" type="primary" @click="payment()"
          >支&nbsp;付</el-button
        >
      </ul>
    </div>
    <a id="play" style="cursor:pointer" target="_new"></a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      w: "",
      h: "",
      radio: "",
      active: 1,
    };
  },
  props: {
    Date_start: {
      type: [String, Number, Date],
    },
    Date_end: {
      type: [String, Number, Date],
    },
    totalMoney: {
      type: Number,
    },
    idays: {
      type: [String, Number],
    },
    IMEI: {
      type: [String, Number],
    },
    ind: {
      type: Number,
    },
  },
  methods: {
    banf() {
      this.$emit("child-msg", false);
    },
    choosePay(index) {
      this.active = index;
    },
    payment() {
      let data = {
        nvr_continuousDays: this.idays,
        nvr_endTime: this.Date_end,
        nvr_serialNumber: this.IMEI,
        nvr_startTime: this.Date_start,
        order_paymentType: this.active, //ali wechat
        order_settleAccounts: this.totalMoney,
        typeOfPurchase: this.ind, // 购买 0永久
      };
      this.$axios({
        method: "post",
        url: "/timeManagement/permanentAndPay",
        data: this.$qs.stringify(data),
      })
        .then((res) => {
          console.log(res);
          if (res.data == "405") {
            this.$alert("设备已租赁!", "提示", {
              confirmButtonText: "确定",
              center: true,
              callback: () => {
                location.reload();
              },
            });
          } else if (res.data == "400") {
            this.$alert("数据非法!", "提示", {
              confirmButtonText: "确定",
              center: true,
              callback: () => {
                location.reload();
              },
            });
          } else if (res.status == "200") {
            // let playele = document.getElementById("play");
            // playele.href = res.data;
            // console.log(playele);
            // playele.click(function(){
            //   alert('点击了！')
            // });

            window.location.href = res.data;
            //  console.log(window.location.href);
            //  window.open(res.data,"_blank");
          } else {
            this.$alert("错误：" + res.data, "提示", {
              confirmButtonText: "确定",
            });
          }
        })
        .catch((err) => {
          // this.$alert("设备已租赁!", "提示", {
          //   confirmButtonText: "确定",
          //   center: true,
          //   callback: () => {
          //     location.reload();
          //   },
          // });
          console.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#paypage {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.15);
  animation: inopcty 0.3s;
  .close {
    animation: close 0.3s ease-in;
  }
  .content {
    position: absolute;
    bottom: 2rem;
    z-index: 99;
    width: 90%;
    left: 0.5rem;
    border-radius: 0.3rem;
    background: #fff;
    text-align: center;
    // box-shadow: 0.01rem 0.01rem 0.3rem 0.1rem #f8f8f8 inset;
    animation: top 0.3s ease-in;
    p {
      line-height: 1.2rem;
      font-size: 0.45rem;
      border-bottom: 0.02rem solid #aaa;
    }
    .span {
      position: absolute;
      top: 0;
      left: 0.9rem;
      line-height: 1.5rem;
      color: #1677ff;
      font-size: 0.33rem;
      border: none;
    }
    li {
      padding: 0.2rem 0;
      position: relative;
      font-size: 0.4rem;
      font-weight: 400;
      width: 80%;
      text-align: left;
      margin: 0.2rem auto;
      line-height: 0.8rem;
      // border-bottom: 0.03rem solid #ddd;
    }
    li::after {
      content: "";
      position: absolute;
      z-index: 999;
      right: 0.2rem;
      top: 50%;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 50%;
      border: 0.06rem solid #eee;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }
    .active {
      color: #1677ff;
    }
    .active::after {
      border-color: #1677ff;
      box-shadow: 0 0 0 0.06rem #1677ff inset;
    }
    li i {
      display: inline-block;
      width: 0.7rem;
      height: 0.7rem;
      background-repeat: no-repeat;
      background-size: 0.7rem;
      vertical-align: middle;
    }
    li:nth-child(1) i {
      background-image: url(../assets/wx.png);
    }
    li:nth-child(2) i {
      background-image: url(../assets/zfb.png);
    }
    .lin {
      margin-top: 0.6rem;
      font-size: 0.42rem;
      width: 80%;
      margin-bottom: 0.5rem;
      padding: .3rem 0;
    }
  }
}
@keyframes inopcty {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes top {
  0% {
    opacity: 0;
    bottom: -5rem;
  }
  100% {
    opacity: 1;
    bottom: 0.5rem;
  }
}
// .el-message-box .el-message-box--center {
//   margin-top: 30vh;
// }
#play {
  position: fixed;
  top: 20%;
  left: 20%;
  z-index: 999999;
}
</style>
